$(function () {
    // !# 2 cropper图片裁剪插件使用
    //获取裁剪区域的dom元素
    var $image = $('#image')
    //   配置选项
    const options = {
        //  从横比
        aspectRatio: 1,
        //  指定预览区域
        preview: '.img-preview',
    }
    // 创建裁剪区域
    $image.cropper(options)


    //  3、模拟点击
    $('#btnUpdate').on('click', function () {
        $('#files').click()
    })


    //4 监听图片(隐藏文件)的变化，也就是用户是否选择文件
    $('#files').on('change', function (e) {
        // 拿到用户选择的文件
        var file = e.target.files[0]
        // 根据选择的文件，创建一个对应的 URL 地址：
        var newImgURL = URL.createObjectURL(file)
        // 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建``新``的``裁剪区域
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', newImgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })
    //  5 确定功能
    $('#uploadSuccess').on('click', function () {
        //5.1 将裁剪后的图片，输出为 base64 格式的字符串
        var dataURL = $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 100,
                height: 100,
            })
            .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式

        // 5.2 裁剪后的图片发送到服务器
        $.ajax({
            method: 'POST',
            url: 'file/upload',
            data: { avatar: dataURL },
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('更新头像失败！')
                }
                // 更新头像成功后的操作
                layer.msg('更新头像成功！')
                // 头像更新成功后，调用父页面的方法来更新头像
                window.parent.getuserinfo()
            },
        })
    })
})
